/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");

:host {
  background: var(--color-white);
  border: 1px solid var(--color-gray30);
  border-radius: 4px;
  box-shadow: 1px 2px 2px 0 var(--color-box-shadow);
  display: block;
  margin-block-end: 4px;
  margin-inline: 4px;
  position: relative;

  &.drag-shadow:not(.dragging) {
    background: var(--color-primary20);
    border-color: transparent;
    box-shadow: none;

    & .story-title,
    & .story-body {
      visibility: hidden;
    }
  }

  &.small-drag-shadow {
    block-size: 4px;
    overflow: hidden;
  }

  &.dragging {
    border-color: var(--color-secondary50);
    box-shadow: 3px 4px 4px rgba(0, 138, 168, 0.15);
  }

  &:hover.dragging .story-kanban-ref-focus {
    cursor: grabbing;
  }

  &.draggable:hover:not(.dragging) {
    box-shadow: 3px 4px 4px rgba(0, 138, 168, 0.15);

    & .draggable-icon {
      display: block;
    }
  }
}

:host(.drag-a11y) {
  background-color: var(--color-gray10);
  border-block-end-width: 2px;
  border-block-start-width: 1px;
  border-color: var(--color-secondary50);
  border-inline-end-width: 2px;
  border-inline-start-width: 1px;
  box-shadow: 4px 4px 0 rgb(211, 251, 244);
  inset-block-end: 4px;
  inset-inline-end: 4px;
  transition: inset 0.2s;
}

.story-kanban-ref-focus {
  display: block;

  &.has-focus {
    &:focus-within {
      border-color: var(--color-secondary);
      border-radius: 4px;
      outline: solid 2px var(--color-secondary);

      & .story-title {
        outline: none;
      }
    }
  }
}

.ref {
  color: var(--color-secondary);
  font-weight: 500;
  margin-block: 2px;
  margin-inline: var(--spacing-4);
}

.text {
  color: var(--color-gray100);
  margin-block: 2px;
  margin-inline: var(--spacing-4);
  overflow: hidden;
  word-break: break-word;
}

.story-title {
  @mixin font-inline;

  display: flex;
  line-height: 1.5;
  outline: none;
  padding: var(--spacing-8);
  padding-block-end: 0;

  &:hover {
    cursor: pointer;
  }

  &::after {
    content: "";
    inset-block-end: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    position: absolute;
  }
}

.story-body {
  padding: var(--spacing-8);
  padding-block-start: 0;
}

.draggable-icon {
  display: none;
  position: absolute;
  transform: translate(-4px, 1px);

  & tui-svg {
    color: var(--color-secondary50);
    inline-size: 5px;
  }
}

.unassigned-button-perm,
.unassigned-button-noperm {
  @mixin font-small;

  border-radius: 4px;
  color: var(--color-gray80);
  display: inline-block;
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-8);
  position: relative;
}

.unassigned-button-perm {
  appearance: none;
  background: none;
  border: none;
  color: var(--color-secondary);
  cursor: pointer;

  &:hover {
    background-color: var(--color-gray20);
    font-weight: var(--font-weight-medium);
  }
}

.assigned-button-perm,
.assigned-button-noperm {
  background: none;
  border: none;
  border-radius: 16px;
  display: inline-flex;
  padding: 0;

  &:hover {
    background-color: var(--color-gray30);
    box-shadow: 1px 2px 2px rgba(216, 222, 233, 0.5);

    & .assigned-user-avatar {
      /* stylelint-disable-next-line max-nesting-depth */
      &::ng-deep tui-avatar {
        border: 2px solid var(--color-gray30);
      }

      /* stylelint-disable-next-line max-nesting-depth */
      &:hover {
        /* stylelint-disable-next-line max-nesting-depth */
        &::ng-deep tui-avatar {
          border: 2px solid var(--color-white);
        }
      }
    }

    & .assigned-user-avatar-extra {
      border: 2px solid var(--color-gray30);

      &:hover {
        border: 2px solid var(--color-white);
      }
    }
  }
}

.assigned-users-list {
  display: flex;
  flex-direction: row-reverse;
}

.assigned-user-avatar {
  &::ng-deep tui-avatar {
    block-size: var(--spacing-32);
    border: 2px solid var(--color-white);
    inline-size: var(--spacing-32);
  }

  &:hover {
    z-index: var(--first-layer);
  }
}

.assigned-user-avatar:not(:last-child) {
  margin-inline-start: -6px;
}

.assigned-user-avatar-extra {
  background: var(--color-gray20);
  block-size: var(--spacing-32);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  display: grid;
  inline-size: var(--spacing-32);
  margin-inline-start: -6px;
  place-items: center;

  &:hover {
    z-index: var(--first-layer);
  }
}
